<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css?v=100" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201223"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>


    <style>

        .hospitalization .ulTable span:nth-child(6),
        .hospitalization .ulTable span:nth-child(7),
        .hospitalization .ulTable span:nth-child(8),
        .hospitalization .ulTable span:nth-child(10),
        .hospitalization .ulTable span:nth-child(9) {
            width: 4% !important;
        }

        .hospitalization .ulTable span:nth-child(1) {
            width: 3% !important;
        }

        .hospitalization .ulTable span:nth-child(5) {
            width: 2% !important;
        }

        .hospitalization .ulTable span:nth-child(2),
        .hospitalization .ulTable span:nth-child(3),
        .hospitalization .ulTable span:nth-child(11),
        .hospitalization .ulTable span:nth-child(12),
        .hospitalization .ulTable span:nth-child(13) {
            width: 8% !important;
        }

        .hospitalization .ulTable span:nth-child(4),
        {
            width: 12% !important;
        }

        .el-dialog {
            width: 580px;
        }

        .zuofei {
            background-color: #a1a3a6 !important;
        }

        .long-order-stop1 {
            color: #C424A8;
        }

        .long-order-run1 {
            color: blue;
        }

        .short-order-stop1 {
            color: red;
        }

        .is-order-ml1 * {
            font-weight: 900;
        }

        .cpoe_cpoeordergroup_begin, .cpoe_cpoeordergroup_middle, .cpoe_cpoeordergroup_end {
            width: 100%;
            display: block;
            margin: 0px;
            float: left;
            border: 0px;
            border-color: #000000;
            border-top: 0px;
            background-color: #000000;
        }

        .cpoe_cpoeordergroup_begin {
            background: url(/wwwroot/Images/combinationbegin_editor.png) no-repeat left 50%;
        }

        .cpoe_cpoeordergroup_middle {
            background: url(/wwwroot/Images/combinationmiddle_editor.png) no-repeat left 50%;
        }

        .cpoe_cpoeordergroup_end {
            background: url(/wwwroot/Images/combinationend_editor.png) no-repeat left 50%;
        }

        .ulTable * {
            box-sizing: border-box;
        }

        .ulTable li {
            cursor: default;
            border: 1px solid #ededed;
        }

        /*.ulTable span{*/
        /*    border-right: 1px solid;*/
        /*    border-color: rgb(226, 223, 223);*/
        /*}*/
    </style>
</head>
<body>
<div id="app" class="patient clinbrain-container hospitalization" v-loading.fullscreen.lock="loading"
     element-loading-text="正在加载数据..." element-loading-background="transparent" v-cloak>
    <div class="header">
        <el-form size="mini" :inline="true">

            <el-form-item label="日期：">
                <el-date-picker type="daterange" v-model="requestModel.dates"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="诊断：">
                <el-input v-model="requestModel.Content" size="mini" style="width:150px;"></el-input>
            </el-form-item>

            <el-form-item label="医嘱信息：">
                <el-checkbox-group v-model="selectCheckboxs">
                    <el-checkbox label="1">长期医嘱</el-checkbox>
                    <el-checkbox label="0">临时医嘱</el-checkbox>
                </el-checkbox-group>

            </el-form-item>
            <el-form-item>
                <i class="el-icon-search clinbrain-i-search" style="margin-top:18px;" v-on:click="search"></i>
            </el-form-item>
        </el-form>
    </div>
    <div class="steps-container">
        <i class="el-icon-arrow-left" v-on:click="changeTimeAxisPage(-1)"></i>
        <div class="clinbrain-steps">
            <div></div>
            <div>
                <div v-for="(item,index) in timeAxis" v-on:click="timeAxisClick(item)"
                     :class="item==activeTimeAxis?'clinbrain-step is-active':'clinbrain-step'">
                    <div class="header" :title="item.diagname">{{item.diagname}}</div>
                    <div class="circular"></div>
                    <div class="footer" :title="item.inhospitaldate">{{item.inhospitaldate}}</div>
                </div>
            </div>
        </div>
        <i class="el-icon-arrow-right" v-on:click="changeTimeAxisPage(1)"></i>
    </div>
    <div style="width:100%;overflow-x:auto;height:calc(100% - 170px);">
        <div class="title ulTable" style="width:100%">
            <span>类型</span>
            <!--                <span>医嘱ID</span>-->
            <span>开始时间</span>
            <span>停止时间</span>
            <span>医嘱内容</span>
            <span></span>
            <span>规格</span>
            <span>总数量</span>
            <span>开嘱医生</span>
            <span>停嘱医生</span>
            <span>核对护士</span>
            <span>核对时间</span>
            <span>执行科室</span>
            <span>备注</span>
            <span>操作</span>
        </div>

        <div class="com-not-data" v-if="isNotData">
            暂无数据
        </div>

        <el-collapse accordion v-model="collapseValue" style="height:calc(100% - 60px);overflow-y:auto;width:100% ">
            <el-collapse-item v-for="(item,index) in AdviceData.AdviceInfo" :title="item.Title" :name="index">
                <ul class="ulTable">
                    <li v-for="(child,cindex) in item.AdviceDetail" :class="GetClass(child)">
                        <span>{{child.OrderClassName}}</span>
                        <span>{{child.StartDtTm|dateFormat}}</span>
                        <span>{{child.StopDtTm|dateFormat}}&nbsp;</span>
                        <span :title="GetOrderText(child)">{{GetOrderText(child)}}&nbsp;</span>
                        <span>
                        <label :class="GroupBy(child,cindex,item.AdviceDetail)">&nbsp;</label>
                        </span>
                        <span>{{child.drugspecification}}&nbsp</span>
                        <span>{{child.TotalDose}}{{child.TotalDoseUnits}}&nbsp;</span>
                        <span>{{child.OrderingDoctorName}}&nbsp;</span>
                        <span>{{child.RepeatIndicator==1?child.StopDoctorName:'--'}}&nbsp;</span>
                        <span>{{child.ReviewPerson}}&nbsp;</span>
                        <span>{{child.ReviewDtTm|dateFormat}}&nbsp;</span>
                        <span>{{child.execDept}}</span>
                        <span>{{child.notes}}</span>
                        <span><a v-on:click="FYHistory(child)">相关费用</a> &nbsp
                        <a v-on:click="ZXHistory(child)">执行记录</a></span>


                    </li>
                </ul>
            </el-collapse-item>
        </el-collapse>
    </div>
    <el-dialog title="执行记录" :visible.sync="ZX.show" width="60%">
        <el-table :data="ZX.Data" height="600">
            <el-table-column property="orderExecId" label="执行ID"></el-table-column>
            <el-table-column property="execAction" label="执行动作" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column property="execEmpName" label="执行人"></el-table-column>
            <el-table-column property="orgNameExec" label="执行科室"></el-table-column>
            <el-table-column property="execTime" label="执行时间">
                <template slot-scope="scope">{{ scope.row.execTime | dateFormat }}</template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog title="费用明细" :visible.sync="FY.show" width="60%">
        <el-table :data="FY.Data" :summary-method="getSummaries" show-summary height="600">
            <el-table-column property="id" label="明细ID"></el-table-column>
            <el-table-column property="itemCode" label="项目编码"></el-table-column>
            <el-table-column property="itemName" label="项目名称"></el-table-column>
            <el-table-column property="amount" label="数量"></el-table-column>
            <el-table-column property="charges" label="金额"></el-table-column>
            <el-table-column property="chargeDate" label="费用时间" sortable>
                <template slot-scope="scope">{{ scope.row.chargeDate | dateFormat }}</template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                collapseValue: [0],
                requestModel: {
                    dates: [],

                    Content: ""
                },
                timeAxis: [],//当前显示时间轴数据
                timeAxisResult: [],//所有时间轴结果
                timeAxisPageSize: 8,//时间轴显示数量
                timeAxisCurrentNumber: 0,//时间轴当前显示下标
                activeTimeAxis: {},//选中时间轴
                selectedDate: "",
                AdviceData: [],
                columns: [],
                loading: false,
                isNotData: true,
                ZX: {
                    show: false,
                    Data: []
                },
                FY: {
                    show: false,
                    Data: []
                },
                selectCheckboxs: ['1', '0']//选中的医嘱类型
            };
        },
        methods: {
            /**
             *医嘱类别选择变化(查询)
             */
            onCheckboxChange() {

                this.timeAxisClick(this.selectedDate);
            },
            search() {
                this.getTimeAxis();
            },
            getDate(index) {
                if (this.requestModel.dates && this.requestModel.dates.length >= index + 1) {
                    return this.requestModel.dates[index];
                }
                return null;
            },
            /**
             *查询时间轴
             */
            getTimeAxis() {
                var _this = this;
                this.loading = true;
                var param = {
                    patientId: clinBrain.getParam("patientId"),
                    OporIpVn: clinBrain.getParam("visitNumber"),
                    opOrIp: clinBrain.getParam("oporIp"),
                    B1000: "",
                    Sdate: this.getDate(0), Edate: this.getDate(1),
                    Content: this.requestModel.Content,
                }
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.PersonalDiagnosis",
                        params: param
                    }
                }, this).success(function (resp) {
                    _this.loading = false;
                    resp.data.Data = resp.data.Data.map(item => {
                        return {
                            inhospitaldate: new Date(item.DxDate).format('yyyy-MM-dd'),
                            visitnumber: '' + item.VisitNumber,
                            diagname: item.HosDxName,
                            patientid: item.PatientID
                        }
                    });
                    _this.timeAxisResult = resp.data.Data;
                    _this.timeAxisCurrentNumber = 8;
                    _this.timeAxis = _this.timeAxisResult.split(_this.timeAxisPageSize);
                    if (_this.timeAxis) {
                        _this.timeAxisClick(_this.timeAxis[0]);
                    }
                });
            },
            /**
             * 时间轴分页
             * method
             * param {int} val 上一页-1，下一页1
             */
            changeTimeAxisPage(val) {
                if (val == -1 && this.timeAxisCurrentNumber == this.timeAxisPageSize) {
                    this.$message({message: "已到最前端"});
                    return;
                }
                if (val == 1 && this.timeAxisCurrentNumber >= this.timeAxisResult.length) {
                    this.$message({message: "已到最末端"});
                    return;
                }
                this.timeAxisCurrentNumber += val;
                this.timeAxis = this.timeAxisResult.take(this.timeAxisCurrentNumber - this.timeAxisPageSize).split(this.timeAxisPageSize);
            },
            /**
             *时间轴点击事件
             */
            timeAxisClick(item) {
                const _this = this;
                _this.collapseValue = [];
                _this.AdviceData = [];
                _this.selectedDate = item;
                _this.activeTimeAxis = item;
                if (item != null && item != undefined) {
                    this.loading = true;
                    clinBrain.request({
                        url: "/pms/query",
                        params: {
                            code: 'com.base.api.cdr.HospitalizationInfo',
                            params: {
                                patientId: clinBrain.getParam('patientId'),
                                OporIpVn: clinBrain.getParam("visitNumber"),
                                opOrIp: clinBrain.getParam("opOrIp"),
                                visitNumber: '' + item.visitnumber
                            }
                        }
                    }, this).success(function (resp) {
                        _this.loading = false;
                        var AdviceDetail1 = resp.data.Data.filter(item => {
                            return item.RepeatIndicator == '0'
                        });
                        var AdviceDetail2 = resp.data.Data.filter(item => {
                            return item.RepeatIndicator == '1'
                        });
                        _this.AdviceData.AdviceInfo = [];
                        if (AdviceDetail1.length > 0) {
                            _this.AdviceData.AdviceInfo.push({
                                Title: '临时医嘱' + AdviceDetail1.length,
                                AdviceDetail: AdviceDetail1
                            });
                        }
                        if (AdviceDetail2.length > 0) {
                            _this.AdviceData.AdviceInfo.push({
                                Title: '长期医嘱' + AdviceDetail2.length,
                                AdviceDetail: AdviceDetail2
                            });
                        }
                        _this.isNotData = !resp.data.Data || resp.data.Data.length == 0;
                        for (var i = 0; i < _this.AdviceData.AdviceInfo.length; i++) {
                            _this.collapseValue.push(i)
                        }
                    });
                } else
                    this.loading = false;
            },
            columnIsExists(val) {
                return this.columns.contains(val);
            },
            /**
             * 医嘱样式
             */
            GetClass(item) {
                var classArray = [];
                if (item.RepeatIndicator == '1') {
                    if (item.orderStatusName == '已作废' || item.orderStatusName == '已停止' || item.orderStatusName == '停止') {
                        classArray.push('long-order-stop1');
                    } else {
                        classArray.push('long-order-run1');
                    }
                } else {
                    if (item.orderStatusName == '已作废') {
                        classArray.push('short-order-stop1');
                    }
                }
                if (item.OrderClassName.indexOf('转科') >= 0 || item.OrderClassName.indexOf('出院') >= 0) {
                    classArray.push('is-order-ml1');
                }
                return classArray;
            },
            GetOrderText(item) {
                var text = item.Name;

                if (item.firstDayNum) {
                    text += ' x' + item.firstDayNum
                }
                if (item.OrderClassName == '药疗') {
                    if (item.DrugDose) {
                        text += ' ' + item.DrugDose + item.DrugDoseUnits;
                    }
                    if (item.DrugUse) {
                        text += ' ' + item.DrugUse;
                    }
                }
                if (item.RepeatIndicator == '1') {
                    if (item.FrequencyDrugUse) {
                        text += ' ' + item.FrequencyDrugUse;
                    }
                }
                if (item.orderStatusName.indexOf('作废') >= 0 || item.orderStatusName.indexOf('停止') >= 0) {
                    text = '[' + item.orderStatusName + '] ' + text;
                }
                return text;
            },
            /**
             *判断分组
             */
            GroupBy(child, index, adviceDetail) {
                if (!child.OrderGroupNumber) return "group-by-none";
                var upChild = null;
                var dnChild = null;

                if (index != 0) {
                    upChild = adviceDetail[index - 1];
                    if (upChild.OrderGroupNumber != child.OrderGroupNumber) {
                        upChild = null;
                    }
                }
                if (index != adviceDetail.length - 1) {
                    dnChild = adviceDetail[index + 1];
                    if (dnChild.OrderGroupNumber != child.OrderGroupNumber) {
                        dnChild = null;
                    }
                }
                //前后分组都不一致
                if (!upChild && !dnChild) {
                    return "group-by-none";
                }
                if (upChild == null) {
                    return "cpoe_cpoeordergroup_begin";
                }
                if (dnChild == null) {
                    return "cpoe_cpoeordergroup_end";
                }
                return "cpoe_cpoeordergroup_middle";
            },

            ///执行记录
            ZXHistory(item) {
                app.ZX.Data = [];
                app.ZX.show = true;

                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.HospitalizationInfoExec",
                        params: {
                            orderId: item.YZID
                        }
                    }
                }, this).success(function (resp) {
                    app.ZX.Data = resp.data.Data;

                });
            },

            //费用记录
            FYHistory(item) {
                app.FY.Data = [];
                app.FY.show = true;

                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.HospitalizationInfoBill",
                        params: {
                            orderId: item.YZID
                        }
                    }
                }, this).success(function (resp) {
                    app.FY.Data = resp.data.Data;
                });
            },

            getSummaries(param) {
                const {columns, data} = param
                const sums = []
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总计'
                    } else if (index === 4) {
                        const values = data.map(item => Number(item[column.property]))
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr)
                                if (!isNaN(value)) {
                                    return prev + curr
                                } else {
                                    return prev
                                }
                            }, 0)
                        } else {
                            sums[index] = 'N/A'
                        }
                    } else {
                        sums[index] = '--'
                    }
                })
                return sums
            },
        },
        created() {
            this.getTimeAxis();
        },


        filters: {
            dateFormat(val) {
                if (val) {
                    return new Date(val).format('yyyy-MM-dd hh:mm:ss');
                } else {
                    return '--'
                }
            },
            /**
             * 浮点数格式化
             */
            formatFloat(val) {
                if (!val) return val;
                return Math.floor(parseFloat(val) * 100) / 100;
            }
        }
    });
</script>
</html>


